<template>
  <div class="relation-container">
    <template v-for="item in data">
      <div class="relation-item">
        <span>{{item.title}}</span>
        <i class="icon icon-c-delete"></i>
      </div>
    </template>
    <div class="add-new-block" @click="addPost">
      <i class="el-icon-plus"></i>
      关联岗位
    </div>
    <m-relatedPosts v-if="addPostVisible" :visible.sync="addPostVisible"></m-relatedPosts>
  </div>
</template>

<script>
import relatedPosts from '../relatedPosts'
  export default {
    components: {
      'm-relatedPosts': relatedPosts
    },
    props: [
      'data'
    ],
    data () {
      return {
        addPostVisible: false
      }
    },
    methods: {
      addPost() {
        this.addPostVisible = true
      }
    },
  }
</script>

<style lang="scss">
  .relation-container{
    width: 600px;
    max-width: 100%;
    .relation-item{
      display:flex;
      margin: 10px 0;
      align-items: center;
      span{
        flex: 1;
        color: #acacac;
        line-height: 22px;
      }
      .icon{
        flex-grow: 0;
        width: 16px;
        margin-left: 20px;
        cursor: pointer;
      }
      .icon:hover{
        opacity: .8;
      }
    }
  }
 
</style>
